<template>
	<view class="post-recommend">
		<view class="search">
			<view class="uni-input">
				<input type="text" value="" placeholder="搜索" />
				<text class="icon iconfont icon-sousuo" @click="submitForm"></text>
			</view>
			<view class="column">
				<picker class="btn" :range="years" @change="yearChange">
					选择分类
				</picker>
			</view>
		</view>
		<view class="content">
			<view class="goods-item" @click="playVideo">
				<view class="images">
					<image mode="widthFix" src="https://h5.ylsp.vip/file/static/pnt-09.png"></image>
				</view>
				<view class="title">
					受益者
				</view>
				<view class="picImages">
					<image src="https://h5.ylsp.vip/file/static/avatar.png" mode=""></image>
					<text>Evan</text>
				</view>
			</view>
		</view>


		<view class="button-view">
			<view class="tab" @click="addPnt" :style="{btnStyle}">
				+
			</view>
			<view class="tabAdd" :class="btnShow? 'active' : ''" @click="release">
				发布
			</view>
			<view class="tabMy" :class="btnShow? 'active' : ''">
				我的
			</view>
		</view>
		<view class="black" v-if="btnShow">

		</view>
	</view>
</template>
<script>
	const NAME = "recommend";
	export default {
		data() {
			return {
				years: ["全部内容", "官方认证", "客户见证", "好物推荐"],
				yearsIndex: 0,
				btnStyle: '',
				btnShow: false,
				tabAddStyle: '',
				tabMyStyle: ''
			}
		},
		watch: {
			$yroute(n) {
				if (n.name === NAME) {



				}
			}
		},
		onUnload() {

		},
		methods: {
			yearChange: function(e) {

				//获得对象的 detail的 value
				//通过数组的下标改变显示在页面的值
				// this.yearsIndex = e.detail.value;
				console.log(e.detail.value)
			},
			addPnt() {
				console.log("点击发布")
				if (this.btnShow) {
					this.btnStyle =
						"-moz-transform:rotate(0eg);background-color: #fc5531;-webkit-transform:rotate(0deg);-o-transform:rotate(0deg);transform:rotate(0deg);transition:all 0.3s;";
					this.btnShow = false
				} else {
					this.btnStyle =
						"-moz-transform:rotate(45deg);background-color: #999;-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);transition:all 0.3s;"
					this.btnShow = true
				}

			},
			release(){
				this.$yrouter.push("/pages/activity/ShortVideo/release/index");
				this.btnStyle = '';
				this.btnShow = false
			},
			playVideo(){
				uni.navigateTo({
				    url: '/pages/activity/ShortVideo/playVideo/index'
				});
				
			}

		}
	}
</script>

<style lang="less">
	.post-recommend {
		height: 100%;
		width: 100%;
		padding-top: 120rpx;
		
		.black {
			position: fixed;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 3;
		}
		
		.button-view {
			position: fixed;
			right: 50rpx;
			bottom: 150rpx;
			height: 100rpx;
			width: 100rpx;
			z-index: 5;
			
			.tab {
				height: 100rpx;
				width: 100rpx;
				-webkit-border-radius: 100%;
				border-radius: 100%;
				background-color: #fc5531;
				color: #ffffff;
				line-height: 90rpx;
				text-align: center;
				font-size: 46px;
				position: absolute;
				top: 0;
				right: 0;
				transition: all 0.5s;
				z-index: 6;
			}
			
			.tabAdd {
				height: 100rpx;
				width: 100rpx;
				-webkit-border-radius: 100%;
				border-radius: 100%;
				background-color: #fc5531;
				color: #ffffff;
				line-height: 100rpx;
				text-align: center;
				font-size: 28rpx;
				position: absolute;
				top: 0;
				right: 0;
				transition: all 0.5s;
				z-index: 5;
			}
			
			.tabAdd.active {
				top: -100rpx;
				right: 110rpx;
				transition: all 0.5s
			}
			
			
			.tabMy {
				height: 100rpx;
				width: 100rpx;
				-webkit-border-radius: 100%;
				border-radius: 100%;
				background-color: orange;
				color: #ffffff;
				line-height: 100rpx;
				text-align: center;
				font-size: 28rpx;
				position: absolute;
				top: 0;
				right: 0;
				transition: all 0.5s;
				z-index: 5;
			}
			
			.tabMy.active {
				top: 100rpx;
				right: 110rpx;
				transition: all 0.5s
			}
		}
		
		
		.content {
			overflow-y: auto;
			column-count: 2;
			-webkit-column-count: 2;
			padding: 0 30rpx;
			
			.goods-item {
				position: relative;
				margin-bottom: 0.8rem;
				overflow: hidden;
				width: 330rpx;
				height: auto;
				display: block;
				border-radius: 10rpx;
				-webkit-column-break-inside: avoid;
				background-color: #ffffff;
				
				.images {
					image {
						width: 100%;
					}
				}
				
				.title {
					padding-left: 20rpx;
				}
				
				.picImages {
					margin-top: 20rpx;
					padding-left: 20rpx;
					padding-bottom: 20rpx;
					
					image {
						height: 60rpx;
						width: 60rpx;
						border-radius: 100%;
						vertical-align: middle;
					}
					
					text {
						margin-left: 10rpx;
						font-size: 24rpx;
					}
				}
			}
		}
		
		
		
		
		.search {
			background-color: #FFFFFF;
			height: 100rpx;
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			
			.uni-input {
				width: 77%;
				float: left;
				position: relative;
				padding: 15rpx 20rpx 0 20rpx;
				box-sizing: border-box;
				
				input {
					width: 100%;
					height: 70rpx;
					border-radius: 35rpx;
					background-color: #f7f7f7;
					border: none;
					padding-left: 30rpx;
					font-size: 28rpx;
					color: #999999;
				}
				
				.icon {
					position: absolute;
					top: 30rpx;
					right: 45rpx;
					color: #999999;
				}
			}
			
			
			.column {
				width: 23%;
				float: left;
				box-sizing: border-box;
				padding: 15rpx 15rpx 0 0;
				
				.btn {
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 20rpx;
					border-radius: 35rpx;
					text-align: center;
					color: #ffffff;
					background-color: #fc5531;
					font-size: 26rpx;
				}
			}
		}
	}
</style>
